import { View, Image, Text } from '@tarojs/components'
import styles from './index.module.scss'
import { AtIcon } from 'taro-ui3';
import { useState } from 'react';
export interface IHobby {
    id: number;
    url: string;
    type: string;
    label: string;
}
const Hobby = (props: IHobby) => {
    const [ checked, setChecked ] = useState<boolean>(false);
    const selectHobby = () => {
        setChecked(!checked)
    }
  return (
    <View className={styles['hobby-container']} onClick={selectHobby}>
        <View className={styles['hobby-item']}>
            <Image className={styles['hobby-img']} src={props.url} mode={'center'}/>
            <View className={`${checked ? styles['hobby-select-active'] : ''} ${styles['hobby-select']}`} >
                <AtIcon value='check' size='12' color='#fff'></AtIcon>
            </View>
        </View>
        <Text className={`${styles['hobby-label']} ${checked ? styles['label-active'] : ''}`}>{props.label}</Text>
    </View>
  )
}

export default Hobby